<script setup lang="ts">
import { useAccount } from "./utils/hook";
import { ref, computed, nextTick, onMounted } from "vue";
import "plus-pro-components/es/components/drawer-form/style/css";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import {
  delay,
  subBefore,
  deviceDetection,
  useResizeObserver
} from "@pureadmin/utils";
import {
  PlusDrawerForm
} from "plus-pro-components";
import More from "@iconify-icons/ep/more-filled";
import Refresh from "@iconify-icons/ep/refresh";
import { format } from "path";

defineOptions({
  name: "callLogs"
});

const size = ref("default");
const treeRef = ref();
const formRef = ref();
const tableRef = ref();
const contentRef = ref();
const treeHeight = ref();
const dynamicSize = ref();
const {
  form,
  isShow,
  loading,
  columnsForTable,
  rowStyle,
  dataList,
  pagination,
  onSearch,
  onRefash,
  resetForm,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  detailVisible,
  detailInfo,
  columns,
  openLogDetail
} = useAccount(treeRef);

onMounted(() => {
  useResizeObserver(contentRef, async () => {
    await nextTick();
    delay(60).then(() => {
      treeHeight.value = parseFloat(
        subBefore(tableRef.value.getTableDoms().tableWrapper.style.height, "px")
      );
    });
  });
});
</script>

<template>
  <div class="main">
    <el-form ref="formRef" :inline="true" :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
      <el-form-item label="应用名称：" prop="realName">
        <el-input v-model="form.appName" placeholder="请输入应用名称" clearable class="!w-[180px]" @keyup.enter="onSearch" />
      </el-form-item>
      <el-form-item label="服务名称：" prop="serviceName">
        <el-input v-model="form.serviceName" placeholder="请输入服务名称" clearable class="!w-[180px]"
          @keyup.enter="onSearch" />
      </el-form-item>
      <el-form-item label="服务调用时间段：" prop="callDate">
        <el-date-picker 
        v-model="form.callDate" 
        type="daterange" 
        class="!w-[240px]" 
        unlink-panels 
        range-separator="至"
        start-placeholder="开始时间" 
        end-placeholder="结束时间" 
        :popper-options="{
            placement: 'bottom-start', // 下拉面板出现的位置，或 'top-start'、'bottom-end'、'top-end' 等，具体看 https://popper.js.org/docs/v2/constructors/#options
          }" 
        :size="dynamicSize" 
        :disabled="size === 'disabled'" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearch"
          @keyup.enter="onSearch">
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
      <PureTableBar :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)" title="服务日志查询" :columns="columnsForTable"
        @refresh="onRefash">
        <template v-slot="{ size, dynamicColumns }">
          <pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading"
            :size="size" adaptive :row-style="rowStyle" :adaptiveConfig="{ offsetBottom: 108 }" :data="dataList"
            :columns="dynamicColumns" :pagination="{ ...pagination, size }" :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }" @selection-change="handleSelectionChange" @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange">
            <template #operation="{ row }">
              <el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(More)"
                @click="openLogDetail(row)">
                详情
              </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
    <div>
      <PlusDrawerForm v-model:visible="detailVisible" v-model="detailInfo" :form="{ columns }" size="50%"
        class="plusDrawer" cancel-text="关闭" :drawer="{
          showClose: false
        }" @confirm="detailVisible = false" title="日志详情" />
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}

//隐藏确定按钮
::v-deep(.plusDrawer) {
  .plus-drawer-form__footer>button:last-child {
    display: none;
  }
}
</style>
